<template>
  <div
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      min-height: 100%;
    "
    @click.stop="onClick"
  >
    <div
      :title="linkCompInfo.label"
      style="
        width: 100px;
        height: 15px;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
      "
    >
      <gd-icon :icon-name="linkCompInfo.iconName" style="margin-right:5px;"></gd-icon>
      {{ linkCompInfo.label }}
    </div>
    <div>
      <el-tooltip class="box-item" effect="dark" content="绑定模板组件" placement="bottom">
        <gd-icon icon-name="link" style="cursor: pointer; margin: 10px" @click.stop="onLink"></gd-icon>
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" content="删除当前单元格" placement="bottom">
        <gd-icon icon-name="delete" style="cursor: pointer; margin: 10px" @click.stop="onDelete"></gd-icon>
      </el-tooltip>
    </div>
  </div>
</template>
<script setup>
  import { computed, inject } from "vue";
  const props = defineProps({
    layoutConfig: {
      type: Object,
    },
  });
  const _emits = defineEmits([
    "biz-designer-layout-bizcomp:blank:cmd",
    "biz-designer-layout-bizcomp:blank:actived",
    "biz-designer-layout-bizcomp:blank:delete",
  ]);
  const onClick = () => {
    //_emits("biz-designer-layout-bizcomp:blank:actived");
    _emits("biz-designer-layout-bizcomp:blank:cmd", "actived");
  };
  const onDelete = () => {
    //_emits("biz-designer-layout-bizcomp:blank:delete");
    _emits("biz-designer-layout-bizcomp:blank:cmd", "delete");
  };
  const onLink = () => {
    //_emits("biz-designer-layout-bizcomp:blank:linkComp");
    _emits("biz-designer-layout-bizcomp:blank:cmd", "linkComp");
  };
  const AllBizTemplates = inject("AllBizTemplates", []);
  const linkCompInfo = computed(() => {
    if (props.layoutConfig.hasOwnProperty("_templateKey")) {
      const matched = AllBizTemplates.find((el) => el.key === props.layoutConfig._templateKey);
      return matched ? { iconName: matched.iconName, label: matched.label } : { iconName: "", label: "尚未绑定" };
    }
    return { iconName: "", label: "尚未绑定" };
  });
  console.log(props.layoutConfig, "布局配置===");
</script>
